<template>
  <div class="my-modal" v-if="visable">
    <div class="my-modal-box">
      <div class="my-modal-container">
        <div class="my-modal-header" :style="{'width':width+'px'}">
          {{title}}
           <span style="position:absolute; right:15px;top:0px; cursor:pointer" @click="closeModal">
            <i class="iconfont cancel-confirm" style="font-size:20px !important">&#xe600;</i>
          </span>
        </div>
        <div class="my-modal-body">
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myModal',
  props: {
    title: String,
    width: String,
    visable: Boolean
  },
  methods: {
    closeModal () {
      this.$emit('closeModal')
    }
  }
}
</script>

<style lang="less" scoped>
  .my-modal{
    position: fixed;
    top:0px;
    bottom:0px;
    right: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: table;
    background: rgba(0, 0, 0, 0.3);
    .my-modal-box{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      .my-modal-container{
        display: inline-block;
        background: #fff;
        .my-modal-header{
          height: 50px;
          background:#1c93a7;
          color:#fff;
          line-height: 50px;
          font-size: 16px;
          position: relative;
        }
        .my-modal-body{
          padding:30px 0px;
        }
      }
    }
  }
</style>
